<template>
	<view>
		<view class="top-cont">
			<view class="top-item">
				<view style="display: flex; width: 80%;">
					<view class="top-desc">
						<label>起始时间：</label>
					</view>
					<view class="top-value">
						<picker class="pickerTll" mode="date" :value="beginDate" @change="beginDateChange">
							<view>{{beginDate}}</view>
						</picker>
					</view>
				</view>
				<view>
					<uni-icons type="forward" color='#ebebeb' size="24" />
				</view>
			</view>
			<view class="top-item">
				<view style="display: flex; width: 80%;">
					<view class="top-desc">
						<label>结束时间：</label>
					</view>
					<view class="top-value">
						<picker class="pickerTll" mode="date" :value="endDate" @change="endDateChange">
							<view>{{endDate}}</view>
						</picker>
					</view>
				</view>
				<view>
					<uni-icons type="forward" color='#ebebeb' size="24" />
				</view>
			</view>
			<view class="top-item" @click="showTree">
				<view style="display: flex; width: 80%;">
					<view class="top-desc">
						<label>申请部门：</label>
					</view>
					<view class="top-value">
						<text>{{selectedDeptName}}</text>
					</view>
				</view>
				<view>
					<uni-icons type="forward" color='#ebebeb' size="24" />
				</view>
			</view>
			<view class="top-item">
				<view style="display: flex; width: 80%;">
					<view class="top-desc">
						<label>检修状态：</label>
					</view>
					<view class="top-value">
						<picker @change="statusPickerChange" :value="statusIndex" :range="statusList" range-key="name">
							<view>{{statusList[statusIndex].name}}</view>
						</picker>
					</view>
				</view>
				<view>
					<uni-icons type="forward" color='#ebebeb' size="24" />
				</view>
			</view>

			<view class="buttn">
				<button type="primary" @click="fetchData()">提交</button>
			</view>
		</view>

		<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="部门选择"
			:localdata="deptList" valueKey="dept_id" textKey="dept_name" childrenKey="children" />

		<view>
			<view class="afim_main" v-for="(item, i) in dataList" :key="i" @click="onClickItem(item)">
				<view class="img-box">
					<text class="tip-text-blue">查看详情</text>
					<image class="list-img" src="@/static/img/default.png" v-if="item.pics.length == 0"></image>
					<image class="list-img" :src="fileUrl + item.pics[0].pic_url" v-if="item.pics.length > 0"></image>
				</view>

				<view class="afim_le">
					<view class="afim_list">
						<label>检修设备:</label>
						<text>{{item.device_name}}</text>
					</view>
					<view class="afim_list">
						<label>检修票号:</label>
						<text>{{item.overhaul_no}}</text>
					</view>
					<view class="afim_list">
						<label>申请人员:</label>
						<text>{{item.create_user_name}}</text>
					</view>
					<view class="afim_list">
						<label>申请部门:</label>
						<text>{{item.apply_dept_name}}</text>
					</view>
					<view class="afim_list">
						<label>申请时间:</label>
						<text>{{item.create_date}}</text>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="dataList.length == 0"></empty>
	</view>
</template>

<script>
	import {
		FILE_URL,
		queryOverhaulManageList,
		queryDeptTree
	} from '@/api/maintenance/selfs.js'
	import Empty from '@/components/selfs/Empty.vue'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	import {
		getFormatDate
	} from '@/utils/date-util.js'
	export default {
		components: {
			Empty,
			baTreePicker
		},
		data() {
			return {
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				dataList: [],
				fileUrl: FILE_URL,
				statusList: [{
						status: '',
						name: '全部'
					},
					{
						status: '1',
						name: '申报'
					},
					{
						status: '2',
						name: '驳回'
					},
					{
						status: '3',
						name: '待指派'
					},
					{
						status: '4',
						name: '班组确认'
					},
					{
						status: '5',
						name: '待接单'
					},
					{
						status: '6',
						name: '待确认'
					},
					{
						status: '7',
						name: '待处理'
					},
					{
						status: '8',
						name: '阶段验收'
					},
					{
						status: '9',
						name: '完成验收'
					},
					{
						status: '10',
						name: '阶段验收通过'
					},
					{
						status: '11',
						name: '完成验收通过'
					},
					{
						status: '12',
						name: '返工'
					},
					{
						status: '13',
						name: '终止'
					},
					{
						status: '14',
						name: '终止审核通过'
					},
					{
						status: '15',
						name: '交接待确认'
					},
					{
						status: '16',
						name: '作废'
					}
				],
				statusIndex: 0,
				selectedDeptName: '',
				selectedDeptId: '',
				beginDate: '',
				endDate: '',
				deptList: []
			}
		},
		methods: {
			// 显示树形选择器
			showTree() {
				this.$refs.treePicker._show();
			},
			// 确定回调事件
			selectChange(ids, names) {
				this.selectedDeptId = ids
				this.selectedDeptName = names
			},
			statusPickerChange(e) {
				this.statusIndex = e.detail.value
			},
			beginDateChange(e) {
				this.beginDate = e.detail.value
			},
			endDateChange(e) {
				this.endDate = e.detail.value
			},
			onClickItem(item) {
				uni.navigateTo({
					url: './stande?userId=' + this.userId + '&userName=' + this.userName +
						'&deptId=' + this.deptId + '&deptName=' + this.deptName +
						"&overhaul_id=" + item.overhaul_id
				})
			},
			fetchData() {
				let params
				params = {
					begin_date: this.beginDate + ' 00:00:00',
					end_date: this.endDate + ' 23:59:59',
					status: this.statusList[this.statusIndex].status,
					user_id: this.userId,
					dept_id: this.deptId,
					apply_dept: this.selectedDeptId
				}
				uni.showLoading({
					title: '正在查询...'
				})
				queryOverhaulManageList(params).then(res => {
					this.dataList = res.datas
				})
			},
			fetchDeptTree() {
				let params
				params = {
					user_id: this.userId,
					dept_id: this.deptId
				}
				queryDeptTree(params).then(res => {
					this.deptList = res.datas
				})
			}
		},
		onLoad: function(e) {
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			this.selectedDeptName = this.deptName
			this.selectedDeptId = this.deptId
			this.beginDate = getFormatDate()
			this.endDate = getFormatDate()
			this.fetchData()
			this.fetchDeptTree()
		},
		created: function() {
			// 订阅详情页回传值的监听
			uni.$on("confirm_refresh", (val) => {
				this.fetchData()
			})
		},
		beforeDestroy: function() {
			uni.$off('confirm_refresh')
		},
	}
</script>

<style>
	page {
		background: #F4F4F4;
	}

	.ware_main {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.ware_le {
		width: 100%;
	}

	.afim_main {
		margin: 15upx;
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		border-bottom: 1upx solid #F4F4F4;
		padding: 10upx;
		border-radius: 10upx;
	}

	.afim_le {
		width: 70%;
	}

	.afim_list {
		margin: 0upx auto;
	}

	.afim_le label {
		color: #267DFF;
		font-size: 30upx;
	}

	.afim_le text {
		font-size: 30upx;
		padding-left: 20upx;
	}

	.afim_ri text {
		border: 2upx solid #267DFF;
		color: #267DFF;
		padding: 3upx 16upx;
		border-radius: 10upx;
		font-size: 30upx;
	}

	.afim_ri text:active {
		background: #267DFF;
		color: #FFFFFF;
	}

	.img-box {
		flex: 0 0 auto;
		width: 170rpx;
		height: 200rpx;
		padding: 15rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	
	}

	.list-img {
		width: 100%;
		height: 100%;
		margin-top: 10rpx;
		flex: 1;
	}

	.tip-text-blue {
		font-size: 28rpx;
		background-color: #007AFF;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 2rpx;
		margin: 0 auto;
	}

	.tip-text-red {
		font-size: 28rpx;
		background-color: #ff0000;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 2rpx;
	}

	.tip-text-green {
		font-size: 28rpx;
		background-color: #00cf00;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 2rpx;
	}

	.top-cont {
		background-color: #fff;
		padding: 20rpx;
	}

	.top-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		border-bottom: #F2F2F2 solid 1rpx;
		min-height: 90rpx;
	}

	.top-desc {
		color: #267DFF;
	}

	.top-value {
		margin-left: 30rpx;
		width: 70%;
	}

	.m-date-picker {
		padding: -20rpx;
	}

	.buttn {
		bottom: 0;
		left: 0;
		right: 0;
	}

	.buttn button {
		font-size: 30upx;
		background: #267DFF;
		border-radius: 0;
	}
</style>